<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
{% load i18n %}
{% load staticfiles %}

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{%block title%}{% trans "string to translate" %}{%endblock%}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="{% static "css/bootstrap.css" %}" rel="stylesheet">

    <script src="{% static "js/jquery.js"%}"></script>
    <script src="{% static "js/bootstrap-dropdown.js" %}" rel="stylesheet"></script>
    <style>
    body {
      padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    }
    </style>
    {# <link href="{% static "css/bootstrap-responsive.css" %}" rel="stylesheet"> #}
    <!-- Le fav and touch icons 
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">-->
    {% block meta %}{% endblock %}
    {% block extrajs %}{% endblock %}
</head>
<body id="{% block body_id %}{% endblock %}" class="{% block body_class %}{% endblock %}">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
			<div class="pull-left" style="position:absolute;text-shadow: 1px 1px 1px #000;vertical-align:text-bottom;margin-bottom: 0;font-size: 32px;letter-spacing: -1px;color: inherit;">
			<img alt="" id="logo" src="{% static "img/sc1_logo.png" %}" />
			SoundCloudPlus.com
			</div>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
				{% if user.username == "" %}
				<div class="pull-right">
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img class="border" alt="" id="avatarimg" src="" />
                            Start Here<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="">{% trans "Sign In" %}</a></li>
                                <li><a href="">{% trans "Sign Up" %}</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
				{% else %}
                <div class="pull-right">
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img class="border" alt="" id="avatarimg" src="" />
                            {{user.username}} <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href=""><i class="icon-cog "></i>{% trans "Settings" %}</a></li>
                                <li><a href="">{% trans "Logout" %}</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
				{% endif %}
            </div>
        </div>
    </div>
  <div id="body">
    {% block body %}
        <div class="row container">
            <div class="span12 content_title">
                {% block content_title %}{% endblock %}
            </div>
            <div class="content">
                <div class="row">
					<div style="width: 300px;float:left">
                    {% block content %}{% endblock %}
					</div>
					<div style="padding-top: 70px;margin-left: 500px;"> Doing as much as possible. </div>
                </div>
				
            </div>
      </div>
    {% endblock %}
  </div> 
</body>
</html>
